<template>
    <div class="address">
        <!-- 这是设置收货地址组件 -->
        <div class="address-content">
            <div class="address-content-title"><h2>配送地址簿</h2></div>
            <div class="address-content-list">
                <a-row type="flex" justify="space-between">
                    <a-col 
                        :xs="24" :sm="22" :md="20" :lg="11" :xl="11" 
                        class="address-list-item"
                        v-for="(item,index) in cityAddressArr" 
                        :key="item.id"
                    >
                        <div class="information">
                            <span>{{item.name}}</span>
                            <span>{{item.phone}}</span>
                            <span>{{item.area_name}}</span>
                            <span>{{item.desc}}</span>
                        </div>
                        <div class="set">
                            <a-checkbox :checked="index == Checked" @click="Checked = index"> 
                                设为默认地址
                            </a-checkbox>
                            <span @click="changeAddress(item)">编辑地址信息</span>
                        </div>
                        <a-icon type="close" class="deladdress" @click="delCity(item.id)"/>
                    </a-col>
                </a-row>
            </div>
            <div class="add-address" @click="showModal">
                <a-icon type="plus"  class="jia"/>
                <span>添加配送地址</span>
            </div>
        </div>

        <!-- 添加地址的对话框 -->
        <a-form-model 
            ref="ruleForm"
            :rules="rules"
            :model="form"
        >
            <a-modal
                title="添加配送地址"
                ok-text="保存"
                cancel-text="取消"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
                dialogClass="my-address"
            >
                <a-row type="flex" justify="space-between">
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="姓名" prop="username">
                            <a-input v-model="form.username" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="手机号" prop="userphone">
                            <a-input v-model="form.userphone"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="7" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="省" prop="city">
                            <a-cascader :options="options" placeholder="Please select" v-model="form.city" @change="onchange"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="地址" prop="address">
                            <a-input v-model="form.address"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-form-model-item label="邮政编码" prop="postalCode">
                            <a-input />
                        </a-form-model-item>
                    </a-col>
                    <a-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11">
                        <a-checkbox>设为默认地址</a-checkbox>
                    </a-col>
                </a-row>
            </a-modal>
        </a-form-model>
    </div>
</template>

<script>
import {getcity, addcity} from '../assets/js/request.js'
import {mapMutations, mapState, mapGetters, mapActions} from 'vuex'
export default {
    data() {
        return {
            // 默认选择地址
            Checked: 0,
            // 验证
            rules: {
                username: [
                  { required: true, message: '姓名为必填项', trigger: 'blur' },
                ],
                userphone: [
                  { required: true, message: '电话为必填项', trigger: 'blur' },
                ],
                city: [
                  { required: true, message: '地址为必选项', trigger: 'blur' },
                ],
                address: [
                  { required: true, message: '地址为必填项', trigger: 'blur' },
                ],
            },
            // 表单里的数据
            form: {
                username:"你好",
                userphone:"",
                city:[],
                address:""
            },
            // 控制对话框的显隐
            visible: false,
            // 控制提交按钮加载效果
            confirmLoading: false,
            // 级联选择选项
            options:[],
            // 判断是修改地址还是新增
            alter: false, //false新增  true修改
            // 修改地址的id
            alterId:""

        };
    },
    async created() {
        this.options = await getcity()
        // 请求自己的地址列表
        this.getMyAdderss()
    },
    computed:{
        ...mapState("address", ["cityAddressArr"])
    },
    methods: {
        ...mapActions('address', ["addCityRequest", "getMyAdderss", "delCity", "upAddress"]),
        ...mapMutations("address", ['upcity']),
        // 对话框的显隐
        showModal() {
            this.visible = true;
        },
        // 提交
        handleOk() {
            this.confirmLoading = true;
            this.handleSubmit()
        },
        // 取消
        handleCancel() {
            console.log('Clicked cancel button');
            this.visible = false;
            this.alterId = false
        },
        // 级联选择触发的回调 
        onchange(value,selectedOptions) {
            this.form.cityList = selectedOptions
        },
        // 提交表单回调函数
        handleSubmit() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    console.log(this.form)
                //   判断说新增还是修改
                    if (this.alter) {
                        this.alter = false
                        this.form.id = this.alterId
                        console.log(this.alter, "修改", this.form)
                        await this.upAddress(this.form)
                        .then((res) => {
                            console.log(res)
                            this.visible = false;
                            this.confirmLoading = false;
                            // 修改成功后，再请求自己的地址列表
                            this.getMyAdderss();
                        }).catch((err) => {
                            this.visible = false;
                            this.confirmLoading = false;
                        })
                    } else {
                        // 验证字段成功, 添加地址请求
                        console.log(this.alter, "添加")
                        await this.addCityRequest(this.form)
                        .then((res) => {
                            this.visible = false;
                            this.confirmLoading = false;
                            // 添加成功后，再请求自己的地址列表
                            this.getMyAdderss();
                        })
                        .catch((err) => {
                            this.visible = false;
                            this.confirmLoading = false;
                        })
                    }
                } else {
                    this.confirmLoading = false;
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 更改收货地址
        changeAddress(data) {
            console.log(data)
            this.visible = true
            this.alter = true
            this.alterId = data.id
            this.form.username = data.name
            this.form.userphone = data.phone
            this.form.address = data.desc
            this.form.area_name = data.area_name
            this.form.city = [Number(data.area.split(",")[0]),Number(data.area.split(",")[1]),Number(data.area.split(",")[2])]
            console.log(this.form)
        }
    },
}
</script>

<style lang="scss">
    .address {
        width: 100%;
        .address-content {
            width: 90%;
            margin: 0 auto;
            .address-content-title {
                h2 {
                    font-size: 32px;
                    font-weight: 400;
                    color: #003150;
                    margin: 14px 25px 40px 0px;
                }
            }
            .address-content-list {
                position: relative;
                .address-list-item {
                    font-size: 14px;
                    text-align: left;
                    border: 1px solid #cccdce;
                    padding: 25px;
                    margin: 0 0 20px;
                    .information {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        margin: 0 0 20px;
                        padding: 0 20px 0 0;
                        span {
                            padding: 2px 0;
                        }
                    }
                    .set {
                        font-size: 12px;
                        color: #003150;
                        display: flex;
                        justify-content: space-between;
                        .ant-checkbox-wrapper {
                            span {
                                font-size: 12px;
                                color: #003150;
                            }
                        }
                        > span {
                            text-decoration: underline;
                        }
                    }
                    // 删除地址
                    .deladdress {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        font-size: 20px;
                        font-weight: 400;
                    }
                }
            }
            .add-address {
                font-size: 12px;
                width: 114px;
                height: 96px;
                padding: 20px;
                border: 1px solid #cccdce;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: 0 0 30px;
                .jia {
                    font-size: 20px;
                    padding: 0 0 10px;
                }
                &:hover {
                    background: #003150;
                    color: white;
                }
            }
        }
    }
    // 添加配送地址的弹窗
    .ant-modal-root {
        .ant-modal-wrap {
            .my-address {
                width: 850px !important;
                .ant-modal-content {
                    border-radius: 0px;
                    // 左上角的关闭按钮
                    .ant-modal-close {
                        .ant-modal-close-x {
                            .anticon {
                                font-size: 25px;
                                color: #003150;
                            }
                        }
                    }
                    // 右上角的标题
                    .ant-modal-header {
                        border: none;
                        .ant-modal-title {
                            color: #003150;
                            font-weight: 700;
                        }
                    }
                    // 中间的填写信息
                    .ant-modal-body {
                        padding: 0 24px;
                        .ant-col {
                            // 每一个input
                            .ant-form-item {
                                margin-bottom: 0px;
                                // 文字标题
                                .ant-form-item-label {
                                    color: #003150;
                                }
                                // input框
                                .ant-form-item-control-wrapper {
                                    .ant-form-item-control {
                                        .ant-form-item-children {
                                            .ant-input {
                                                height: 50px;
                                                font-size: 16px;
                                                border-radius: 0px;
                                                border: 1px solid #003150;
                                                color: #003150;
                                            }
                                            .ant-cascader-picker {
                                                width: 100%;
                                            }
                                        }
                                        // 下拉选择框
                                        .ant-select-enabled {
                                            color: #003150;
                                            width: 100%;
                                            .ant-select-selection {
                                                height: 50px;
                                                border-radius: 0px;
                                                border:1px solid #003150;
                                                .ant-select-selection__rendered {
                                                    line-height: 50px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            // 选择默认地址的多选框
                            .ant-checkbox-wrapper {
                                color: #003150;
                                height: 100%;
                                display: flex;
                                align-items: flex-end;
                                .ant-checkbox {
                                    font-size: 25px;
                                    .ant-checkbox-input {
                                        border-radius: 0px;                                        
                                        width: 20px;
                                    }
                                }
                            }
                        }
                    }
                    // .弹框的底部 
                    .ant-modal-footer {
                        padding: 20px 24px 30px;
                        border: none;
                        text-align: left;
                        .ant-btn {
                            text-align: center;
                            width: 150px;
                            height: 50px;
                            border-radius: 0px;
                            color: white;
                            background: #003150;
                            &:hover{
                                border: 1px solid #003150;
                                color: #003150;
                                background: white;
                            }
                        }
                    }
                }
            }
        }
    }
    
    
</style>